<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>间距</title>
    <style>

        /*
        align-content用于修改 flex-wrap 属性的行为，搭配使用
        flex-wrap 控制是否换行。
        align-content 控制换行后的多行对齐方式。
        语法:align-content: flex-start | flex-end | center | space-between | space-around | stretch
        align-content: stretch - 默认。各行将会伸展以占用剩余的空间。
                       flex-start - 各行向弹性盒容器的起始位置堆叠。
                       flex-end - 各行向弹性盒容器的结束位置堆叠。
                       center -各行向弹性盒容器的中间位置堆叠。
                       space-between -各行在弹性盒容器中平均分布。
                       space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
        */
        .container {
            width: 400px;
            height: 600px;
            background-color: #e1e1e1;
            display: flex;

            align-content: space-between;
            flex-wrap: wrap;

            /*gap: 10px;：同时设置垂直和水平的间距为 10px。*/
            /*row-gap: 40px;：设置垂直间距为 40px。*/
            /*column-gap: 20px;：设置水平间距为 20px。*/
            /*gap: 10px 20px;：分别设置垂直和水平间距为 10px 和 20px。*/
        }
        .container div {
            background-color: #ffb84d;
            border: 2px solid #666;
        }
        .item1{
            width: 300px;
            height: 100px;
        }
        .item2{
            width: 300px;
            height: 100px;
        }
        .item3{
            width: 300px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">one</div>
        <div class="item2">two</div>
        <div class="item3">three</div>
    </div>
</body>
</html>